<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/webjars/layui/2.5.7/css/layui.css"/>
</head>
<script src="/webjars/layui/2.5.7/layui.js"></script>
<body>
<button id="add">添加</button>
<table id="demo" lay-filter="test"></table>


<script id="barDemo">

    <button lay-event="add">添加</button>
    <button lay-event="del">删除</button>
</script>


</body>
<script>
    layui.use(['table','jquery','layer'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var layer = layui.layer;
        $('#add').click(function(){
            layer.open({

                type:2,
                content:'/user/addUser'
            })
        })

        table.on('tool(test)',function(obj){
            //默认会给我们封装好一个 obj对象
            console.log(obj);
            if(obj.event == "add" ){
               layer.open({

                   type:2,
                   content:'user/addUser'
               })
            }

            if(obj.event == "del"){
                $.ajax({
                    url:'/user/deleteUserById',
                    data:{id:obj.data.id},
                    success:function(data){
                        if(data == 1){
                            layer.msg("删除成功");
                            //重载
                            tab.reload();
                        }else{
                            layer.msg("删除失败");
                        }
                    },error:function(){
                        layer.msg("与服务器交互失败")
                    }
                })
            }
        })


        //第一个实例
        var tab=table.render({
            elem: '#demo'
            ,height: 312
            ,url: '/user/getAllUser' //数据接口

            ,cols: [
                [ //表头
                {field: 'id', title: 'ID'}
                ,{field: 'name', title: '用户名'}
                ,{field: 'sex', title: '性别',templet:function(d){
                    if(d.sex=='男'){
                        return "<div style=\"color: blue\">男</div>"
                    }else{
                        return "-----"
                    }
                    }}
                ,{field:'createTime',title:'时间', templet : function(d){
                    if(d.createTime == null){
                        return "<div>啥都没有</div>"
                    }else{
                        return layui.util.toDateString(d.createTime,"yyyy--MM--dd  HH:mm:ss")
                    }

                    }}
                ,{toolbar:'#barDemo'}

            ]
            ]
        });

    });
</script>


</html>